<template>
  <div>
    <van-tabs v-model="active" sticky>
      <van-tab v-for="(item, index) in list" :key="index" :title="item.name">
        <div>
          <ul class="everyImg">
            <router-link
              tag="li"
              :to="'/home/photoInfo/' + detail.id"
              v-for="(detail, i) in item.details"
              :key="i"
            >
              <img v-lazy="detail.url" />
              <div class="text">
                <h1 class="title">{{ detail.title }}</h1>
                <p class="content">{{ detail.content }}</p>
              </div>
            </router-link>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import one from "../../images/img1.png";
import two from "../../images/img2.jpeg";
import three from "../../images/img3.jpeg";
import four from "../../images/meng.png";
import beauty from "../../images/beauty.png";
import menu1 from "../../images/menu1.png";
import menu2 from "../../images/menu2.png";
import menu3 from "../../images/menu3.png";
import menu4 from "../../images/menu4.png";

export default {
  data() {
    return {
      active: 0,
      list: [
        {
          id: 0,
          name: "全部",
          details: [
            {
              id: 10,
              url: one,
              title: "五年级那一刻我长大了作文400字",
              content:
                "在这个世界上，一星陨落，黯淡不了星空灿烂，一花凋零，荒芜不了整个春天。",
            },
            {
              id: 12,
              url: two,
              title: "我的网课生活作文600字",
              content:
                "盈盈月光，我掬一杯最清的；落落余辉，我拥一缕最暖的；灼灼红叶，我拾一片最热的；萋萋芳草，我摘一束最灿",
            },
            {
              id: 13,
              url: four,
              title: "形形色色的人作文",
              content: `静静的心里，都有一道最美丽的风景。尽管世事繁杂，此心依然，情怀依然；尽管颠簸流离，脚步依然，追求依然；尽管岁月沧桑，世界依然，生命依然。守住最美风景，成为一种风度，宁静而致远；守住最美风景，成为一种境界，悠然而豁达；守住最美风景，成为一种睿智，淡定而从容。带着前世的印记，心怀纯净，身披霞带，踏一水清盈，今生，寻美好而来。`,
            },
            {
              id: 14,
              url: beauty,
              title: "六年级家乡的风俗作文400字",
              content: `即使青春是一株大地伟岸的树，但我明白，一株独秀永远不是挺拔，成行成排的林木，才是遮风挡沙的绿色长城。即使青春是一叶大海孤高的帆，但我明白，一叶孤帆很难远航，千帆竞发才是大海的壮观。`,
            },
            {
              id: 15,
              url: three,
              title: "第一天上网课日记600字",
              content: `花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留；懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契；懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风景要远观，才能美好；有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。`,
            },
          ],
        },
        {
          id: 1,
          name: "推荐",

          details: [
            {
              url: beauty,
              title: "六年级家乡的风俗作文400字",
              content: `即使青春是一株大地伟岸的树，但我明白，一株独秀永远不是挺拔，成行成排的林木，才是遮风挡沙的绿色长城。即使青春是一叶大海孤高的帆，但我明白，一叶孤帆很难远航，千帆竞发才是大海的壮观。`,
            },
            {
              url: three,
              title: "第一天上网课日记600字",
              content: `花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留；懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契；懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风景要远观，才能美好；有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。`,
            },
          ],
        },
        {
          id: 2,
          name: "热门",
          details: [],
        },
        {
          id: 3,
          name: "抗疫",
          details: [],
        },
        {
          id: 4,
          name: "同城",
          details: [],
        },
      ],
    };
  },
  methods: {
    getIdByclick() {
      var newList2 = [
        { url: menu1 },
        { url: menu2 },
        { url: menu3 },
        { url: menu4 },
        { url: beauty },
      ];
    },
  },
  created() {},
};
</script>

<style>
.van-tabs {
  top: 46px;
}
.van-tab__pane {
  padding-top: 100px;
}

element.style {
  top: 0;
}
.van-sticky--fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
.everyImg {
  padding: 0px 10px 10px;
  margin-top: -80px;
}
.everyImg li {
  position: relative;
  margin-bottom: 10px;
  box-shadow: 0 0 7px gray;
}
img {
  width: 100%;
  vertical-align: middle;
}
img[lazy="loading"] {
  width: 40px;
  height: 300px;
  margin: auto;
}
.title {
  padding: 0;
  margin: 0;
  font-size: 16px;
  color: #fff;
  font-weight: 500;
}
.content {
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: #fff;
}
.everyImg .text {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);

  height: 75px;
  overflow: hidden;
}
</style>